<template>
  <div>
    <a-list item-layout="horizontal" :data-source="planList">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta
              :description="item.content"
          >
            <template #title>
              <a>{{ item.date }}</a>
            </template>
            <template #avatar>
              {{ item.content }}
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script>
import {defineComponent, onMounted, reactive, toRefs} from "vue";
import {useStore} from 'vuex';
import * as types from '../../store/action-types';
export default defineComponent({
  setup(props, context) {
    const store = useStore();
    const state = reactive({
      planList: store.state.planList
    })
    onMounted(() => {
      store.dispatch(types.SET_PLAN_LIST)
    });

    return {
      ...toRefs(store.state)
    }
  }
})
</script>